<template>
	<div class="container add_edit">
		<el-form :model="form" ref="ruleForm" :rules="rules" label-width="130px">

			<el-form-item label="类型">
				<el-radio-group v-model="form.type">
					<el-radio label="小程序">小程序</el-radio>
					<el-radio label="广告位">广告位</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="名称" prop="app_name" ref="app_name">
				<el-input v-model="form.app_name" placeholder="名称"></el-input>
			</el-form-item>

			<el-form-item v-if="form.type=='小程序'" label="AppId" prop="app_id" ref="tite">
				<el-input v-model="form.app_id" placeholder="AppId"></el-input>
			</el-form-item>




			<el-form-item label="图片" prop="app_logo">
				<uni-file-picker v-model="imageValue" fileMediatype="image" returnType="object" :image-styles="imgStyle"
					@success="imgUpload" @delete="imgDelete" />
			</el-form-item>


			<el-form-item v-if="form.type=='广告位'" label="广告位弹出图片" prop="ad_img">
				<uni-file-picker v-model="adImageValue" fileMediatype="image" returnType="object"
					:image-styles="imgStyle" @success="titeimgUpload" @delete="titeimgDelete" />
			</el-form-item>

			<el-form-item label="排序">
				<el-input v-model.number="form.sort" type="number" min="0"></el-input>
				<div class="remark_txt">此处排序将决定前端模块的位置，数字越小，位置越前</div>
			</el-form-item>
			<el-form-item label="状态">
				<el-switch v-model="form.state" active-color="#F9D749" inactive-color="#bbb" active-value="启用"
					inactive-value="禁用"></el-switch>
			</el-form-item>


			<el-form-item label="描述">
				<el-input v-model="form.app_des" placeholder="描述"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button class="confirm_btn" @click="submitForm('ruleForm')">确 定</el-button>
				<el-button @click="returnPage">返回列表</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import bus from '@/common/bus';
	const __name = 'ny-share-app';
	export default {
		props: {},
		data() {
			return {
				dataId: '',
				form: {
					app_id: '',
					ad_img: [],
					app_logo: {},
					sort: 0,
					app_name: '',
					state: '启用',
					type: '小程序',
					app_des: ''
				},
				imageValue: null,
				adImageValue: null,
				imgStyle: {
					height: '150px',
					width: '150px'
				},
				rules: {
					app_name: [{
						required: true,
						message: '请输入App名称',
						trigger: 'change'
					}],
					app_id: [{
						required: true,
						message: '请输入AppId',
						trigger: 'change'
					}],
					app_logo: [{
						required: true,
						message: '请上传图片',
						trigger: 'change'
					}],
					ad_img: [{
						required: true,
						message: '请上传弹出的广告图片',
						trigger: 'change'
					}],
				}
			};
		},
		methods: {
			async loadData() {
				if (!this.dataId) {
					return;
				}

				await this.$db[__name].tofirst(this.dataId).then(res => {
					if (res.code == 200) {
						for (let item in this.form) {
							this.form[item] = res.datas[item];
						}
						if (this.form.app_logo) {
							this.imageValue = {};
							this.imageValue.url = this.form.app_logo;
						}
						if (this.form.ad_img) {
							this.adImageValue = {};
							this.adImageValue.url = this.form.ad_img;
						}
					}
				});
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid, obj) => {
					// 默认获取第一个未验证 form 属性名
					this.$api.set_unvalidated_form_focus(this, obj);
					if (valid) {
						if (!this.dataId) {
							console.log('add')
							if (this.form.ad_img.length == 0) {
								delete this.form.ad_img
							}
							this.$db[__name].add(this.form).then(res => {
								if (res.code == 200) {
									this.getOpenerEventChannel().emit('loadData');
									this.returnPage();
								}
							});
						} else {
							this.$db[__name].update(this.dataId, this.form).then(res => {
								if (res.code == 200) {
									this.getOpenerEventChannel().emit('loadData');
									this.returnPage();
								}
							});
						}
					}
				});
			},
			imgUpload(e) {
				this.form.app_logo = e.tempFilePaths[0];
			},
			imgDelete() {
				this.imageValue = null;
				this.form.app_logo = '';
			},
			titeimgUpload(e) {
				this.form.ad_img = e.tempFilePaths[0];
			},
			titeimgDelete() {
				this.adImageValue = null;
				this.form.ad_img = '';
			},
			returnPage() {
				bus.$emit('tab-close');
				this.$router.push('/pages/base_set/page')
			}
		},
		created() {
			this.dataId = this.$route.query.id || '';
			this.loadData();
		}
	};
</script>

<style></style>
